<template>
  <div class="page_main">
    <div class="search-box">
      <el-form :inline="true" size="mini" :model="searchForm" ref="searchForm">
        <search-form-box :show-more-btn="false">
          <template slot="showSearch">
            <el-form-item label="销售单组：" prop="group_id">
              <el-select v-model="searchForm.group_id" placeholder="请选择销售单组" clearable filterable>
                <el-tooltip v-for="group in group_arr" :key="group.id" effect="dark" placement="right">
                  <div slot="content">
                    <div>组别所含销售单信息</div>
                    <div v-for="(item,index) in group.saleVOList" :key="group.id+''+index">
                      {{
                        item.contract_num + '——' + item.actual_execute_time_start + '~' + item.actual_execute_time_end
                      }}
                    </div>
                  </div>
                  <el-option :label="group.name" :value="group.id"></el-option>
                </el-tooltip>
              </el-select>
            </el-form-item>
            <el-form-item label="物品类型" prop="goods_type_id">
              <el-select v-model="searchForm.goods_type_id" placeholder="请选择物品类型" clearable filterable>
                <el-option v-for="item in goods_type_arr" :key="item.id" :value="item.id" :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入库人：" prop="user_id">
              <el-select v-model="searchForm.user_id" placeholder="请选择入库人" clearable filterable>
                <el-option v-for="user in user_list" :key="user.id" :label="user.name" :value="user.id"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <template slot="searchBtn">
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </template>
        </search-form-box>
      </el-form>
    </div>
    <div class="table-box">
      <el-button size="mini" type="primary" style="margin-bottom: 10px" @click="showAdd">新增入库</el-button>
      <el-table :data="tableData" size="mini" border style="width: 100%" v-loading="tableLoading">
        <el-table-column type="index" label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="组别信息" width="300" align="center">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content">
                <div>组别所含销售单信息</div>
                <div v-for="(item,index) in scope.row.billSaleVOList" :key="index">
                  {{ item.contract_num + '——' + item.actual_execute_time_start + '~' + item.actual_execute_time_end }}
                </div>
              </div>
              <div>{{ scope.row.group_name }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="goods_name" label="物品名称" width="200" align="center"></el-table-column>
        <el-table-column prop="number" label="数量" width="100" align="center"></el-table-column>
        <el-table-column label="单价" width="100" align="center">
          <template slot-scope="scope">
            ￥{{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="total_price" label="总价" width="100" align="center">
          <template slot-scope="scope">
            ￥{{ scope.row.total_price }}
          </template>
        </el-table-column>
        <el-table-column prop="product_date" label="生产日期" width="150" align="center"></el-table-column>
        <el-table-column prop="due_date" label="到期日期" min-width="150" align="center"></el-table-column>
        <el-table-column prop="user_name" label="入库人" min-width="200" align="center"></el-table-column>
        <el-table-column label="操作" width="120px" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="operation">
              <el-button-group>
                <el-button
                  type="primary"
                  icon="el-icon-edit-outline"
                  size="mini"
                  @click.native="showEdit(scope.row)"
                >编辑
                </el-button>
              </el-button-group>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination :current-page.sync="searchForm.page" :page-sizes="[10,20,50,100, 200,400]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :page-size.sync="searchForm.page_size" :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    >
    </el-pagination>
    <goods-put-dialog ref="goodsPutDialog" :group-arr="group_arr" :user-list="user_list" :group-id-required="false" @reload="reload"></goods-put-dialog>

  </div>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox'
import { add, group_list, list } from '@/api/goods/goods_put'
import { allList } from '@/api/system/user'
import { list as typeList, list_str } from '@/api/goods/goods_type'
import { multiply } from '@/utils/amount'
import GoodsPutDialog from '@/views/administration/goods/components/goodsPutDialog.vue'

export default {
  name: 'GoodsIn',
  components: { GoodsPutDialog, SearchFormBox },
  data() {
    var checkAccount = (rule, value, callback) => {
      if (value === '' || value === null) {
        callback(new Error('总价不能为空'))
      } else {
        const reg = /(^[1-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{2}$)/
        if (reg.test(value)) {
          callback()
        } else {
          callback(new Error('总价不是合法金额'))
        }
      }
    }
    return {
      listParams: {
        group_id: null,
        goods_type_id: null,
        user_id: null,
        page: 1,
        page_size: 10
      },
      searchForm: {
        group_id: null,
        goods_type_id: null,
        user_id: null,
        page: 1,
        page_size: 10
      },
      goods_put: null,
      group_arr: [],
      tableData: [],
      tableLoading: false,
      total: null,
      user_list: [],
      goods_type_arr: []
    }
  },
  created() {
    this.initGroupArr()
    this.getList()
    this.initUserList()
    this.initGoodsType()
  },
  methods: {
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    getList() {
      this.tableLoading = true
      this.listParams = Object.assign({}, this.searchForm)
      list(this.listParams).then(res => {
        if (res.code === 200) {
          this.tableLoading = false
          this.tableData = res.data.records
          this.total = res.data.total
        }
      }).catch(() => {
        this.tableData = []
        this.tableLoading = false
      })
    },
    search() {
      this.getList()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.getList()
    },
    showAdd() {
      this.$refs.goodsPutDialog.show()
    },
    // 编辑弹出框
    showEdit(row) {
      this.$refs.goodsPutDialog.goodPut =  Object.assign({goods_type_name: row.goods_name}, row)
      this.$refs.goodsPutDialog.show()
    },
    initGroupArr() {
      group_list().then(res => {
        this.group_arr = res.data
      }).catch(() => {
        this.group_arr = []
      })
    },
    initUserList() {
      allList().then(res => {
        this.user_list = res.data.filter(user => user.status == 1)
      }).catch(() => {

      })
    },
    initGoodsType() {
      typeList().then(res => {
        this.goods_type_arr = res.data
      }).catch(() => {

      })
    },
    reload() {
      this.initGoodsType()
      this.getList()
    }
  }
}
</script>

<style scoped>
.page_main {
  padding: 20px;
}

.table-box {
  margin-bottom: 20px;
}
</style>
